<template>
  <div class="flex justify-between text-[#e54c5f]">
    <div class="flex items-center cursor-pointer" @click="handleClick">
      <el-icon>
        <ArrowLeftBold />
      </el-icon>
      <span class="pl-5">{{ $t("银行卡管理") }}</span>
    </div>
    <div>
      <el-button
        type="primary" :icon="Plus" size="large"
        @click="handleClickCreate({ type: 'add' })"
        >{{ $t("添加银行卡") }}</el-button>
    </div>
  </div>
  <div class="my-5">
    <el-skeleton :rows="5" animated :loading="loading">
      <div class="flex flex-col w-80 items-center" v-if="!cardsList.length">
        <el-card
          class="w-80 h-52 mb-5"
          :body-style="{ padding: 0, height: '100%' }"
        >
          <div
            class="h-full flex flex-col items-center justify-center cursor-pointer"
            @click="handleClickCreate({ type: 'add' })"
          >
            <el-icon size="40">
              <Plus />
            </el-icon>
            <p class="text-xl mt-3">{{ $t("添加银行卡") }}</p>
          </div>
        </el-card>
      </div>
      <el-row :gutter="20">
        <el-col :span="8" v-for="(item, index) in cardsList" :key="index">
          <div class="flex flex-col w-full">
            <el-card class="w-full my-5 text-sm">
              <div class="h-full flex flex-col justify-center">
                <p class="flex justify-around mb-4">
                  <span class="flex w-1/3 text-left"><!--{{ $t("类型") }}--></span>
                  <span class="flex-1 md:w-2/3 text-right"><el-tag :type="item.card_type == 1 ? 'success' : 'warning'">{{ item.card_type_name }}</el-tag></span>
                </p>
                <p class="flex justify-around mb-2">
                  <span class="flex w-1/3 text-left">{{ $t("账户名称") }}</span>
                  <span class="flex-1 md:w-2/3 text-right">{{ item.name }}</span>
                </p>
                <p class="flex justify-around mb-2">
                  <span class="flex w-1/3 text-left">{{ $t("银行国家/地区") }}</span>
                  <span class="flex-1 md:w-2/3 text-right">{{ item.address }}</span>
                </p>
                <p class="flex justify-around mb-2">
                  <span class="flex w-1/3 text-left">{{ $t("银行名称") }}</span>
                  <span class="flex-1 md:w-2/3 text-right">{{ item.bank }}</span>
                </p>
                <p class="flex justify-around mb-2">
                  <span class="flex w-1/3 text-left">{{ $t("银行地址") }}</span>
                  <span class="flex-1 md:w-2/3 text-right">{{ item.address }}</span>
                </p>
                <p class="flex justify-around mb-2">
                  <span class="flex w-1/3 text-left">{{ $t("银行账号") }}</span>
                  <span class="flex-1 md:w-2/3 text-right">{{ item.card_number }}</span>
                </p>
                <p class="flex justify-around mb-2">
                  <span class="flex w-1/3 text-left">{{ $t("收款人名称") }}</span>
                  <span class="flex-1 md:w-2/3 text-right">{{ item.card_name }}</span>
                </p>
                <p class="flex justify-around mb-2">
                  <span class="flex w-1/3 text-left">{{ $t("SWIFT/BIC") }}</span>
                  <span class="flex-1 md:w-2/3 text-right">{{ item.swift_code }}</span>
                </p>
                <p class="flex justify-around mb-2">
                  <span class="flex w-1/3 text-left">{{ $t("币种") }}</span>
                  <span class="flex-1 md:w-2/3 text-right">{{ item.bank_currency }}</span>
                </p>
                <p class="flex justify-around mb-2">
                  <span class="flex w-1/3 text-left">{{ $t("银行补充信息") }}</span>
                  <span class="flex-1 md:w-2/3 text-right">{{ item.extended }}</span>
                </p>
              </div>
            </el-card>
            <div class="flex justify-around">
              <el-button
                type="danger" :icon="Delete"
                class="w-24"
                @click="handleDel({ ...item, type: 'del' })"
                >{{ $t("删除") }}</el-button>
              <el-button
                type="warning" :icon="Edit"
                class="w-24"
                @click="handleClickCreate({ ...item, type: 'edit' })"
                >{{ $t("编辑") }}</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-skeleton>
  </div>
  <CardsDialogForm
    @closeDialog="closeDialog"
    @submitForm="dialogSubmit"
    @handleCardTypeChange="handleCardTypeChange"
    :dialogVisible="dialogVisible"
    :form="dialogForm"
    :currencyList="currencyList"
  />
</template>
<script setup>
import { useRouter } from "vue-router";
import { ref, reactive } from "vue";
import {
  cardsListApi,
  payCardsSubmitApi,
  merchantKycApi,
  PayCurrencyApi,
} from "@/api/account/index";
import { ElMessageBox, ElMessage } from "element-plus";
import { Edit, Plus, Delete } from '@element-plus/icons-vue'
import CardsDialogForm from "./cardsDialogForm.vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const loading = ref(false);
const dialogVisible = ref(false);
const router = useRouter();
const cardsList = ref([]);
const currencyList = ref([]); //币种
const title = ref(t("添加银行卡"));
const kyc = reactive({});
const dialogFormData = {
  card_id: "",
  type: "",
  bank: "",
  swift_code: "",
  country: "",
  address: "",
  card_name: "",
  card_number: "",
  card_type: "",
  currency: "",
  phone: "",
  email: "",
  extended: "",
};
const dialogForm = reactive({ ...dialogFormData });
// 获取银行卡
const getCardsData = async () => {
  try {
    loading.value = true;
    const res = await cardsListApi();
    if (res?.list.length) {
      cardsList.value = res.list;
    }
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};
const handleCardTypeChange = (value) => {
  dialogForm.card_name = value == 1 ? kyc.company_name : kyc.personal_name;
};
// 删除
const handleDel = (item) => {
  ElMessageBox.confirm(t("您是否确认删除?"), t("温馨提示"), {
    type: "warning",
  })
    .then(async () => {
      const res = await payCardsSubmitApi(item);

      ElMessage({
        message: "OK",
        type: "success",
      });
      getCardsData();
    })
    .catch(() => {});
};

// 提交
const dialogSubmit = async (param) => {
  // console.log(param);
  try {
    const res = await payCardsSubmitApi(param);
    ElMessage({
      showClose: true,
      message: "OK",
      type: "success",
    });
//    console.log(res.message),
    getCardsData();
    dialogVisible.value = false;
  } catch (error) {
    dialogVisible.value = false;
  }
};
// 打开窗口
const handleClickCreate = async (data) => {
  try {
    const res = await merchantKycApi();
    // console.log(res);
    Object.assign(kyc, res);
    dialogVisible.value = true;
    Object.assign(dialogForm, data);
    const res_c = await PayCurrencyApi();
    if (res_c.length) {
      currencyList.value = res_c.map((item) => {
        return { value: item, label: item };
      });
    }
  } catch (error) {}
};
// 关闭窗口
const closeDialog = () => {
  dialogVisible.value = false;
  Object.assign(dialogForm, dialogFormData);
};

const handleClick = () => {
  router.replace(`/account/withdraw`);
};

getCardsData();
</script>
